<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>玉米商城</title>
<link rel="stylesheet" type="text/css" href="#{$smarty.const.APP}#/View/template/home/css/hui.css" />
<style type="text/css">
/* 自定义样式  */
.hui-hot-sreach {
	background: #FFFFFF;
	padding: 12px;
}
.hui-hot-sreach-title {
	line-height: 38px;
	font-size: 15px;
	font-weight: 700;
}
.hui-hot-sreach-keys {
	margin-top: 8px;
}
.hui-hot-sreach-keys a {
	display: block;
	border-radius: 5px;
	float: left;
	margin: 0 8px 10px 0px;
	padding: 6px 10px;
	line-height: 20px;
	font-size: 13px;
	background: #EFF3F6;
}
</style>
</head>
<body>
<header class="hui-header">
 <div id="hui-back"></div>
 <div id="hui-header-sreach">
  <div id="hui-header-sreach-icon"></div>
  <form>
   <input type="search" value="#{$name}#" id="searchKey" onkeydown="if(event.keyCode==13)return false;" placeholder="请输你要找的商品" />
  </form>
 </div>
 <div id="hui-header-menu" onclick="javascript:hui.showSlideMenu();"></div>
</header>
<div class="hui-slide-menu">
 <ul>
  <li><a href="#{$smarty.const.ACT}#/home/WxGoods/goods_show/" class="hui-font-white">全部</a></li>
  #{foreach from=$typelist key=k item=v}#
  <li><a href="#{$smarty.const.ACT}#/home/WxGoods/goods_show/typeid/#{$v.id}#/" class="hui-font-white">#{$v.typename}#</a></li>
  #{/foreach}#
  <li style="padding-top:30px;">
   <button type="button" class="hui-button hui-button-large" onclick="hui.closeSlideMenu();">关闭菜单</button>
  </li>
 </ul>
</div>
<div class="hui-center-title" style="margin-top:30px;"></div>
<style>
    #list2 li{width:50%; float:left; 0px;}
    #list2 .hui-img-list-content{padding:5px; padding-bottom:10px;}
    #list2 h1{font-size:14px;}
</style>
 <div id="refreshContainer" class="hui-refresh">
  <div class="hui-refresh-icon"></div>
  <div class="hui-refresh-content hui-img-list goods-list">
   <ul id="list">
   </ul>
  </div>
 </div>	
	

<input type="hidden" id="name" name="name" value="#{$name}#">
<input type="hidden" id="area_id" name="area_id" value="#{$area_id}#">
<input type="hidden" id="price_order" name="price_order" value="#{$price_order}#">
<input type="hidden" id="star_val" name="star_val" value="#{$star_val}#">
<script src="#{$smarty.const.APP}#/View/template/home/js/hui.js" type="text/javascript" charset="utf-8"></script>
<script src="#{$smarty.const.APP}#/View/template/home/js/hui-refresh-load-more.js" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8" >
//监听搜索事件
document.getElementById('searchKey').addEventListener('keyup', function(e){if(e.keyCode == 13){searchNow();}});
function hotSearch(k){
	hui('#searchKey').val(k);
	searchNow();
}
//核心搜索函数
function searchNow(){
	document.activeElement.blur();
	var kwd = hui('#searchKey').val();
	kwd = kwd.trim();
	if(kwd.length < 2){
		hui.toast('关键字至少2个字符');
		hui('.hui-hot-sreach').show();
		return;
	}
	//关闭热搜
	hui('.hui-hot-sreach').hide();
	hui.toast('搜索 '+ kwd);
	var url='#{$smarty.const.ACT}#/home/WxGoods/goods_show/name/'+kwd+"/";
	window.location.href=url;
	
}
//清空
function clearSearch(){
	hui('#searchKey').val('');
	hui('.hui-hot-sreach').show();
}
/* slide menu */
hui.slideMenu();

//加载列表
var page = 1;
hui.refresh('#refreshContainer', refresh);
hui.loadMore(getMore);
//加载更多
function getMore(){
	//请求数据
	var name 	   = hui('#name').val();
	var area_id 	= hui('#area_id').val();
	var price_order = hui('#price_order').val();
	var star_val 	= hui('#star_val').val();
	hui.ajax({
		type : 'POST',
		url : '#{$smarty.const.ACT}#/home/WxGoods/goods_json/',
		data : {pageNum:page,name:name,area_id:area_id,price_order:price_order,star_val:star_val},
		backType:'json',
		beforeSend : function(){hui.loading();},
		complete : function(){hui.closeLoading();},
		success : function(data){
			if(data.code=='sucess'){
            //判断加载完毕
            if(data.list == 'null'){
                hui.endLoadMore(true, '已经到头了...');
                return false;
            }
            for(var i = 0; i < data.list.length; i++){
					   var htmltxt='';
                var li = document.createElement('li');
						htmltxt		+=  '<a href="#{$smarty.const.ACT}#/home/WxGoods/goods_show_one/id/'+data.list[i]['goods_id']+'/">';
						htmltxt		+=    '<div class="hui-media-list-img"><img src="'+data.list[i]['defaultpic']+'" /></div>';
						htmltxt		+=    ' <div class="hui-img-list-content">';
						htmltxt		+=  		'<h1>'+data.list[i]['goods_name']+'</h1>';
						htmltxt		+=    	  '<p><span class="pri">￥'+data.list[i]['sale_price']+'</span><span class="buy">购买</span></p>';
						htmltxt		+=    '</div>';
						htmltxt		+=  '</a>';
						li.innerHTML= htmltxt;
                hui(li).appendTo('#list');
            }
			}else{
				hui.upToast(data.message);
			}
			page++;
        hui.endLoadMore();
		},
		error : function(e){
			console.log(JSON.stringify(e));
			hui.iconToast('读取消息失败', 'warn');
		}
	});
}
//下拉刷新
function refresh(){
   hui.loading('加载中...');
	
	var name 	  	= hui('#name').val();
	var area_id 	= hui('#area_id').val();
	var price_order	= hui('#price_order').val();
	var star_val 	= hui('#star_val').val();
	
	//请求数据
	hui.ajax({
		type : 'POST',
		url : '#{$smarty.const.ACT}#/home/WxGoods/goods_json/',
		data : {pageNum:1,name:name,area_id:area_id,price_order:price_order,star_val:star_val},
		backType:'json',
		beforeSend : function(){hui.loading();},
		complete : function(){hui.closeLoading();},
		success : function(data){
			if(data.code=='sucess'){
            //判断加载完毕
            if(data.list == 'null'){
                hui.endLoadMore(true, '已经到头了...');
                return false;
            }
				 var htmltxt='';
            for(var i = 0; i < data.list.length; i++){ 
                var li = document.createElement('li');
						htmltxt		+= '<li>';
						htmltxt		+=  '<a href="#{$smarty.const.ACT}#/home/WxGoods/goods_show_one/id/'+data.list[i]['goods_id']+'/">';
						htmltxt		+=    '<div class="hui-media-list-img"><img src="'+data.list[i]['defaultpic']+'" /></div>';
						htmltxt		+=    ' <div class="hui-img-list-content">';
						htmltxt		+=  		'<h1>'+data.list[i]['goods_name']+'</h1>';
						htmltxt		+=    	  '<p><span class="pri">￥'+data.list[i]['sale_price']+'</span><span class="buy">购买</span></p>';
						htmltxt		+=    '</div>';
						htmltxt		+=  '</a>';
						htmltxt		+= '</li>';
            }
				 page = 2;
				 hui('#list').html(htmltxt);
			}else{
				hui.upToast(data.message);
			}
			//结束刷新
			hui.endRefresh();
			//重置加载更多状态
			hui.resetLoadMore();
		},
		error : function(e){
			console.log(JSON.stringify(e));
			hui.iconToast('读取消息失败', 'warn');
		}
	});
}
</script>
</body>
</html>